import React, { Component } from 'react';
import store from '../../redux/store';
import {incrementAction,decrementAction} from '../../redux/count_action';

export default class Count extends Component {
    //按住alt键，可以选择多个
    state={other:'其他参数'}

    //假设有很多个组件都要用到store
    // componentDidMount(){
    //    store.subscribe(()=>{
    //        this.setState({})
    //    })
    // }
    increment=()=>{
      const {value}=this.selectNum;
      store.dispatch(incrementAction(value*1))
    }
    decrement=()=>{
        const {value}=this.selectNum;
        store.dispatch(decrementAction(value*1))
    }
    incrementIfOdd=()=>{
        const {value}=this.selectNum;
        const count=store.getState()
        if(count%2!==0){
            store.dispatch(incrementAction(value*1))
        }
       
    }
    incrementAsync=()=>{
        const {value}=this.selectNum;
        setTimeout(()=>{
            store.dispatch(incrementAction(value*1))
        },500)
            
        
    }
    render() {
        return (
            <div>
                <h1>当前求和:{store.getState()} </h1>
                <select ref={c=>{this.selectNum=c}}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
               <button onClick={this.increment}>+</button>
               <button onClick={this.decrement}>-</button>
               <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
               <button onClick={this.incrementAsync}>异步加</button>
            </div>
        );
    }
}
